<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-header-bar{
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
</style>
<template>
    <div class="layout">
        <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
            <Menu :active-name="actives" theme="dark" width="auto" :open-names="    openNames">
                <Submenu name="1">
                    <template slot="title">
                        <Icon type="ios-navigate"></Icon>
                        转购管理
                    </template>
                    <MenuItem name="1-1" @click.native="go('1','1-1')" to="/Catalog/">用户转购</MenuItem>
                   <!--  <MenuItem name="1-2" @click.native="go('1','1-2')"to="/Catalog/test">Option 2</MenuItem> -->
                    <!-- <MenuItem name="1-3" @click.native="go('1','1-3')">Option 3</MenuItem> -->
                </Submenu>
                <Submenu name="2">
                    <template slot="title">
                        <Icon type="ios-keypad"></Icon>
                        学习站管理
                    </template>
                    <MenuItem name="2-1" @click.native="go('2','2-1')" to="/Catalog/learn">学习站</MenuItem>
                    <!-- <MenuItem name="2-2" @click.native="go('2','2-2')">Option 2</MenuItem> -->
                </Submenu>
            <!--     <Submenu name="3">
                    <template slot="title">
                        <Icon type="ios-analytics"></Icon>
                        Item 3
                    </template>
                    <MenuItem name="3-1" @click.native="go('3','3-1')" >Option 1</MenuItem>
                    <MenuItem name="3-2" @click.native="go('3','3-2')"  >Option 2</MenuItem>
                </Submenu> -->
            </Menu>
        </Sider>
        <Layout :style="{marginLeft: '200px'}">
        <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
                  
                <div class="informa">
                <div class="amin_yp">
                      混沌大学北京分社欢迎你！
                  </div>
                  <div class="preson">
                      <span class="logo" @click="firstpage"></span>
                     <span class="first-index">北京分社</span>
                  </div>
                
                </div>
            </Header>
            <Content :style="{padding: '0 16px 16px'}">
                <Breadcrumb :style="{margin: '16px 0'}">
                    <!-- <BreadcrumbItem>Home</BreadcrumbItem>
                    <BreadcrumbItem>Components</BreadcrumbItem>
                    <BreadcrumbItem>Layout</BreadcrumbItem> -->
                </Breadcrumb>
                <Card>
                    <div style="min-height:800">
                    <!-- <keep-alive> -->
                    <router-view></router-view>
                    <!-- </keep-alive> -->
                    </div>
                </Card>
            </Content>
        </Layout>
    </div>
</template>
<script>
    export default {
             data () {
            return {
                openNames:['1'],
                actives:'1-1',
              
            }
        },
        created(){
         if (JSON.parse(sessionStorage.getItem('data'))!=null) 
             {
            this.openNames=[JSON.parse(sessionStorage.getItem('data')).openNames];
             this.actives=JSON.parse(sessionStorage.getItem('data')).actives
             }
        },
        methods: {
                go(openNames,actives){
                    var obj={
                        'openNames':openNames,
                        'actives':actives
                    };
                   obj = JSON.stringify(obj); 
                    sessionStorage.setItem('data',obj);
                },
            firstpage(){
                 this.$router.push({
                    path: '/',query: {history: 1}
                 })
                 sessionStorage.removeItem("Token");
             }
             }

    }
</script>
<style scoped>
.informa{
    height: 100%;
  /*  display: flex;
    align-items: center;
    justify-content: flex-end;*/
overflow: hidden;
}
.preson{
     float: right;
      height: 100%;
width: 140px;
display: flex;
justify-content: space-between;
}
.informa .logo{
 cursor: pointer;
display: inline-block;
width: 50px;
height: 100%;
background: #fff url("../images/Signout.png") center center no-repeat;
}
.informa  .first-index{
    font-size: 18px;
    height: 100%;
   /* display: inline-block;
    line-height: 100%;*/
}
.amin_yp{
    font-size: 20px;
    font-weight: bold;
    width:300px;
    display: inline-block;
    text-align:center;
    position:relative;
    animation:myfirst 16s infinite;
    -webkit-animation:myfirst 16s infinite; /* Safari and Chrome */
        }
@keyframes myfirst
{
    0%   {color:#f0892d; left:0; top:0px; opacity:1;}
    25%  {color:#2df033; left:600px; top:0px; opacity:0;}
    50%  {color:#ffc107; left:600px; top:2px; opacity:1;}
    75%  {color:#07cfff; left:0; top:2px; opacity:0;}
    100% {color:#f0892d; left:0; top:0px;opacity:1;}
}

</style>
